<template>
    <scroll-view class="drawer-container" :style="'padding-top:'+cusnavbarheight+'rpx'" scroll-y="true">
        <slot></slot>
        <view :class="isIOS?'apple-style bottom-wrapper':'bottom-wrapper'">
            <view class="reset-btn flex-center" @click="handleReset">重置</view>
            <view class="sure-btn flex-center" @click="handleSure">确认</view>
        </view>
    </scroll-view>
</template>

<script>
const res = wx.getSystemInfoSync();
const statusHeight = res.statusBarHeight; //状态栏高度
const cusnavbarheight = (statusHeight)*2;

const systemInfo = uni.getSystemInfoSync();
const isIOS = systemInfo.platform === 'ios';
export default {
    emits: ["reset", "sure"],
	data(){
		return {
		  cusnavbarheight:cusnavbarheight,
		  isIOS:isIOS
		}
	},
	onLoad() {
	},
    methods: {
        handleReset() {
            this.$emit("reset")
        },
        handleSure() {
            this.$emit("sure")
        },
    },
}
</script>

<style lang="scss">
.drawer-container {
    position: relative;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    background-color: $color-white;
    color: $color-gray-1;

    .bottom-wrapper {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 20rpx;
        z-index: 0;
        height: 72rpx;
        display: flex;
        font-size: 28rpx;
        view {
            flex: 1;
        }

        .reset-btn {
            background-color: $color-white;
            border-top: 1rpx solid #f0f0f0;
        }

        .sure-btn {
            background-color: $app-color-main;
            color: $color-white;
        }
    }
	.apple-style{
		margin-bottom: 20rpx;
	}
}
</style>
